<template>
  <el-dialog title="菜单" :visible.sync="showDialog" @close="btnCancel">
    <!-- 表单 -->
    <el-form v-if="this.formData.type===2" ref="perForm" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="按钮名称" prop="permission_name">
        <el-input v-model="formData.permission_name" style="width:90%" placeholder="请输入按钮名称" />
      </el-form-item>
      <el-form-item label="权限标识" prop="permission_mark">
        <el-input v-model="formData.permission_mark" style="width:90%" placeholder="格式：controller@action" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <template>
          <el-input-number v-model="formData.sort" :min="1" :max="100" @change="handleChange" />
        </template>
      </el-form-item>
    </el-form>

    <el-form v-else ref="perForm" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="菜单名称" prop="permission_name">
        <el-input v-model="formData.permission_name" style="width:90%" placeholder="请输入菜单名称" />
      </el-form-item>
      <el-form-item label="菜单地址" prop="route">
        <el-input v-model="formData.route" style="width:90%" placeholder="请输入路由地址，以/开头" />
      </el-form-item>
      <el-form-item label="组件地址" prop="component">
        <el-input v-model="formData.component" style="width:90%" placeholder="请输入组件路径地址，不以/开头" />
      </el-form-item>
      <el-form-item label="权限标识" prop="permission_mark">
        <el-input v-model="formData.permission_mark" style="width:90%" placeholder="格式：controller@action" />
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon">
        <!-- <el-input v-model="formData.icon" style="width:90%" placeholder="点击选择图片" /> -->
        <template>
          <!-- <el-select v-model="value" clearable placeholder="点击选择图片"> -->
          <el-popover
            ref="popover"
            placement="right"
            width="500"
            trigger="focus"
          >
            <IconSelect @selected="IconSelect" />
          </el-popover>
          <el-input
            v-model="formData.icon"
            v-popover:popover
            class="elInput"
            placeholder="请选择图标"
            @focus="isShowfocus"
          />

          <!-- </el-select> -->
        </template>
      </el-form-item>
      <el-form-item label="Redirect" prop="redirect">
        <el-input v-model="formData.redirect" style="width:90%" placeholder="请输入Redirect" />
      </el-form-item>
      <el-form-item label="是否外链" prop="islink">
        <el-radio-group v-model="formData.islink">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <template>
          <el-input-number v-model="formData.sort" :min="1" :max="100" @change="handleChange" />
        </template>
      </el-form-item>
      <el-form-item label="Hidden" prop="hidden">
        <el-radio-group v-model="formData.hidden">
          <el-radio :label="1">否</el-radio>
          <el-radio :label="2">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="KeepAlive" prop="keepalive">
        <el-radio-group v-model="formData.keepalive">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>

    <el-row slot="footer" type="flex" justify="end">
      <el-col>
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="showDialog=false">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { addcaidanlist, xgaicaidan, xgaicaidanlist } from '@/api/menu'
import { getInfolist, getInfo } from '@/api/user'
export default {
  name: 'Addcaidan',
  data() {
    const checkName = async(rules, value, cb) => {
      let isRepeat = false
      if (this.formData.id) {
        if (this.formData.type === 1) {
          isRepeat = this.list.filter(item => item.parent_id === this.formData.parent_id && item.id !== this.formData.id)
            .some(item => item.permission_name === value)
        } else {
          isRepeat = this.annu.filter(item => item.id !== this.formData.id)
            .some(item => item.permission_name === value)
        }
        // console.log(isRepeat = this.list.filter(item => item.parent_id === this.formData.parent_id && item.id !== this.formData.id))
      } else {
      // 添加  思路： 找到当前点击部门的子部门数据； 将输入的值和这些子部门数据的name进行匹配，找到说明存在了
        isRepeat = this.list.some(item => item.permission_name === value)
      }
      return isRepeat ? cb(new Error(`同级已经存在${value}这个名称`)) : cb()
    }
    const checkmark = async(rules, value, cb) => {
      let isRepeat = false
      if (this.formData.id) {
        if (this.formData.type === 1) {
          isRepeat = this.list.filter(item => item.parent_id === this.formData.parent_id && item.id !== this.formData.id)
            .some(item => item.permission_mark === value)
        } else {
          isRepeat = this.annu.filter(item => item.id !== this.formData.id)
            .some(item => item.permission_mark === value)
        }
        // console.log(isRepeat = this.list.filter(item => item.parent_id === this.formData.parent_id && item.id !== this.formData.id))
      } else {
      // 添加  思路： 找到当前点击部门的子部门数据； 将输入的值和这些子部门数据的name进行匹配，找到说明存在了
        isRepeat = this.list.some(item => item.permission_mark === value)
      }
      return isRepeat ? cb(new Error(`同级已经存在${value}这个名称`)) : cb()
    }
    return {
      formData: {
        icon: '',
        islink: 2,
        sort: 10,
        keepalive: 1,
        hidden: 1,
        type: 1,
        parent_id: 0
      },
      showDialog: false,
      rules: {
        permission_name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }],
        route: [{ required: true, message: '请输入路由地址，以/开头', trigger: 'blur' }],
        permission_mark: [{ required: true, message: '格式：controller@action', trigger: 'blur' },
          { validator: checkmark, trigger: 'blur' }]
      },
      list: [],
      arr: [],
      annu: []

    }
  },
  methods: {
  // 插件，获取图标
    isShowfocus() {
      this.$refs.popover.$el.click()
    },
    // 获取图标名
    IconSelect(name) {
      // console.log(name)
      this.formData.icon = name
    },
    // 关闭，清空数据
    btnCancel() {
      this.formData.permission_name = ''
      this.formData.route = ''
      this.formData.component = ''
      this.formData.icon = ''
      this.formData.redirect = ''
      this.formData.permission_mark = ''
    },
    // 排序
    handleChange(value) {
      console.log(value)
    },
    // 通过id获取个人信息
    async huoquyhxx(id) {
      const res = await xgaicaidan(id)
      const res2 = await getInfo()
      // console.log(res2.data.permission_menu_list)
      this.list = res2.data.permission_menu_list
      this.annu = res2.data.permission_btn_list
      // console.log(this.list)
      this.formData.type = res.data.type
      // console.log(this.formData.type)
      this.formData = res.data
      // console.log(this.formData)
      this.showDialog = true
    },
    // 确定提交
    async btnOK() {
      const qwe = {
        permission_name: this.formData.permission_name,
        route: this.formData.route,
        component: this.formData.component,
        permission_mark: this.formData.permission_mark,
        icon: this.formData.icon,
        redirect: this.formData.redirect,
        islink: this.formData.islink,
        sort: this.formData.sort,
        hidden: this.formData.hidden,
        keepalive: this.formData.keepalive,
        type: this.formData.type,
        parent_id: this.formData.parent_id
      }
      if (this.formData.id) {
        await xgaicaidanlist(this.formData.id, this.formData)
      } else {
        await addcaidanlist(qwe)
      }
      // await addcaidanlist(data)
      // 提示成功
      this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      // 关闭
      this.showDialog = false
      // 列表更新
      this.$emit('update-list')
    },
    async xianshi() {
      const res = await getInfolist()
      this.list = res.data
      // console.log(this.list)
      this.showDialog = true
    }

  }
}
</script>

<style lang='scss' scoped>
.el-form-item{
  display: inline-block;
  width: 50%;
}
</style>
